<template>
	<view class="app-editor e-flex-column">
		<editorIcon :formats="formats" @setFormat="setFormat" @removeFormat="removeFormat" @insertDate="insertDate"
			@undo="undo" @redo="redo" @insertDivider="insertDivider" @insertImage="insertImage"></editorIcon>
		<view class="app-editor__box e-flex-1">
			<scroll-view scroll-y="true">
				<editor id="editor" :read-only="props.readOnly" :placeholder="props.placeholder" showImgSize showImgToolbar
					showImgResize @ready="handlerReady" @focus="onFocus" @blur="onBlur" @input="onInput"
					@statuschange="statuschange"></editor>
			</scroll-view>

		</view>
	</view>
</template>


<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	
	export default defineComponent({
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	})
</script>
<script setup lang="ts">
	import {
		ref,
		watch,
		nextTick
	} from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import editorIcon from './editorIcon.vue'
	import {
		uploadFilePath
	} from '@/common/request/api'
	import { chooseImage } from '@/common/utils';
	
	const ctx = useCurrentInstance()
	const props = defineProps<{
		placeholder ?: string
		value ?: string
		readOnly ?: boolean
		chooseImageCount ?: number
	}>()
	
	const emit = defineEmits(['ready','focus','blur','input'])
	
	const editorCtx = ref({})
	const hasReadOnly = ref(true)
	const formats = ref({})
	
	watch(props.readOnly,(newVal) => {
		hasReadOnly.value = newVal
	})
	
	
	const onFocus = (e:any) => {
		emit('focus', e)
	}
	const onBlur = (e:any) => {
		emit('blur', e)
	}
	const onInput = (e:any) => {
		emit('input', {
			html: e.detail.html,
			text: e.detail.text
		})
	}
	const handlerReady = () => {
		emit('ready')
		// 使用nextTick防止出现editor已经加载完成，createSelectorQuery获取不到元素的问题
		nextTick(() => {
			if (hasReadOnly.value) {
				hasReadOnly.value = false
			}
			uni.createSelectorQuery()
				.select('#editor')
				.context(res => {
					editorCtx.value = res.context
					editorCtx.value.setContents({
						html: props.value
					})
				})
				.exec()
		})
	}
	const undo = () => {
		if (!hasReadOnly.value) {
			editorCtx.value.undo()
		}
	}
	const redo = () => {
		if (!hasReadOnly.value) {
			editorCtx.value.redo()
		}
	}
	const setFormat = (name, value) => {
		if (!name) return
		editorCtx.value.format(name, value)
	}
	const statuschange = (e) => {
		formats.value = e.detail
	}
	const removeFormat = () => {
		editorCtx.value.removeFormat()
		setFormat('lineHeight', '')
		setFormat('align', '')
		if(formats.value.header){
			setFormat('header', '')
		}
		if(formats.value.list){
			setFormat('list', '')
		}
	}
	const insertDate = ()  => {
		editorCtx.value.insertText({
			text: ctx.$timeFormat(new Date().getTime(), 'yyyy/mm/dd')
		})
	}
	const insertDivider = () => {
		editorCtx.value.insertDivider()
	}
	const insertImage = () => {
		chooseImage({
			count: props.chooseImageCount
		}).then(res => {
			if (res) {
				res.tempFiles.forEach(item => {
					uploadFilePath(item.tempFilePath).then(data => {
						if (data.code == 200) {
							editorCtx.value.insertImage({
								src: ctx.$fullLink(data.data.url),
								alt: 'image'
							})
						}
					})
				})
			}
		})
	
	}
	
	

</script>


<style lang="scss" scoped>
	.app-editor {
		flex: 1;
		width: 100%;
		height: 100%;

		&__box {
			width: 100%;
			overflow: hidden;
			scroll-view{
				height: 100%;
				
			}
		}

		#editor {
			height: 100%;
		}
	}
</style>
